<template>
	<div class="login-container">
		<div class="login-tilte">
			<img src="../../assets/images/mine/img_logo@2x.png" alt="">
		</div>
		<div class="login-register">
			<p class="register">
				<router-link to='/mine/register'>
					<span>注册</span>
				</router-link>
			</p>
			<p class="login" @click='goToLogin'>
				<span>登录</span>
			</p>
			<div class="others-login" v-show='isshow'>
				<p><span>第三方登录</span></p>
				<p>
					<img src="../../assets/images/mine/QQicon@2x.png" alt="">
					<img src="../../assets/images/mine/wechat_icon@2x.png" alt="">
				</p>
			</div>
		</div>
		<div class="login_window" v-show='isshow'>
				<span class="close_window" @click='closeLogin'>
					<img src="../../assets/images/mine/icon_guanbi@2x.png" alt="">
				</span>
				<p class="userInput">
					<input type="text" placeholder="手机号" v-model='phonenumber'>
				</p>
				<p>
					<input type="password" placeholder="密码" v-model='password'>
				</p>
				<p>
					<span>忘记密码</span>
					<span @click='login'>登录</span>
					<router-link to='/mine/register'>还没有账号,去注册吧？</router-link>
				</p>
		</div>
		<div class="showError" v-show='isShowError'>
			<span>{{ showError }}</span>
		</div>
	</div>
</template>
<script>
	import ShopHeader from "../../components/shopheader"
	export default{
		name:'login',
		data(){
			return{
				phonenumber:'',
				password:'',
				showError:'',
				isShowError:false,
				isshow:false,
				dataArr:{
					isInput:false,
					iconArr:[
						{
							iconLeft:"icon-zuojiantou",
							iconRight:""
						}
					],
					placeholder:"登录",
					aimUrl:"/layout/mine",
					rightUrl:''
				}
			}
		},
		components:{
			ShopHeader
		},
		methods:{
			goToLogin(){
				this.isshow = true;
			},
			closeLogin(){
				this.isshow = false;
			},
			login(){
				if( this.phonenumber == '' || this.password == ''){
					alert("请输入用户名或密码")
				}else{
					var data1 = {phonenumber:this.phonenumber,
						password:this.password}
					const url = this.HOST + '/login'
					this.$axios.post(url,data1)
					.then(res => {
                		// console.log(res.data)
                		if(res.data.code == '400'){
                			this.isShowError = true
                			this.showError = '登录失败'
                			setTimeout(function(){
                      			this.isShowError = false
                  			}.bind(this),3000)
                		}else{
                			var curdata = data1;
                			curdata.username = res.data[0].username;
                			
                			this.$cookie.set('test',JSON.stringify(curdata),7)
                			console.log(JSON.parse(this.$cookie.get('test')))
                			setTimeout(function(){
                      			this.$router.push('/layout/mine')
                  			}.bind(this),1000)
                		}
                	})
                	.catch(error => {
                		console.log(error)
                	})
				}
			}
		}
	}
</script>
<style scoped lang="less">
	.login-container{
		width: 100%;
		min-height: 1334 / 100rem;
		background-color: #fff;
		position: relative;
		.login-tilte{
			width: 100%;
			height: 555 / 100rem;
			background-color: #ff5555;
			img{
				width: 267 / 100rem;
				height: 148 / 100rem;
				margin-top: 180 / 100rem;
				margin-left: 235 / 100rem;
				margin-right: 250 / 100em;
			}
		}
		.login-register{
			width: 100%;
			margin-top: 130 / 100rem;
			padding-left: 100 / 100rem;
			padding-right: 100 / 100rem;
			text-align: center;
			box-sizing: border-box;
			.register{
				margin-left: 25 / 100rem;
				width:500 / 100rem; 
				border:none;
				letter-spacing: 10 / 100rem;
				margin-bottom: 80 / 100rem;
				span{
					display: inline-block;
					width: 500 / 100rem;
					height: 76 / 100rem;
					line-height: 76 / 100rem;
					border: 2px solid #ff5555;
					color: #fff;
					font-size: 36 / 100rem;
					font-weight: 600;
					background-color: #ff5555;
					border-radius: 8 / 100rem;
					box-shadow: 0 0 14 / 100rem 14 / 100rem rgba(255, 85, 85, 0.2); 
				}
			}
			.login{
				margin-left: 25 / 100rem;
				width:500 / 100rem; 
				border:none;
				letter-spacing: 10 / 100rem;
				span{
					display: inline-block;
					width: 500 / 100rem;
					height: 76 / 100rem;
					line-height: 76 / 100rem;
					color: #ff5555;
					border: 2px solid #ff5555; 
					font-size: 36 / 100rem;
					font-weight: 600;
					background-color: #fff;
					border-radius: 8 / 100rem;
					box-shadow: 0 0 14 / 100rem 14 / 100rem rgba(255, 255, 255, 0.2); 
				}
			}
			.others-login{
				margin-top: 150 / 100rem;
				width: 100%;
				p:nth-child(1){
					text-align: center;
					margin-bottom: 36 / 100rem;
					span{
						font-size: 26 / 100rem;
						color: #ff5555;
					}
				}
				p:nth-child(2){
					text-align: center;
					img{
						width: 58 / 100rem;
						height: 58 / 100rem;
					}
					img:nth-child(1){
						margin-right: 74 / 100rem;
					}
				}
			}
		}
		.login_window{
			width: 550 / 100rem;
			height: 550 / 100rem;
			padding: 0 20 / 100rem;
			box-sizing: border-box;
			border-radius: 8 / 100rem;
			box-shadow: 0 0 30 / 100rem 6 / 100rem rgba(255, 85, 85, 0.3);
			background-color: #fff;
			position: absolute;
			top:396 / 100rem;
			left: 100 / 100rem;
			right: 100 / 100rem;
			.close_window{
				float: right;
				margin-top:20 / 100rem;
				img{
					width: 24 / 100rem;
					height: 24 / 100rem;
				}

			}
			.userInput{
				// overflow: hidden;
				clear: both;
				margin-top: 86 / 100rem;
				margin-bottom: 34 / 100rem;
				border-radius: 8 / 100rem;
				input{
					width: 510 / 100rem;
					height: 80 / 100rem;
					color: rgba(0, 0, 0, 0.8);
					font-size: 26 / 100rem;
					text-indent: 44 / 100rem;
					border: none;
					outline: none;
					background-color:#f2f2f2;
					border-radius: 8 / 100rem;
				}
			}
			p:nth-child(3){
				margin-bottom: 85 / 100rem;
				border-radius: 8 / 100rem;
				input{
					width: 510 / 100rem;
					height: 80 / 100rem;
					color: rgba(0, 0, 0, 0.8);
					font-size: 26 / 100rem;
					text-indent: 44 / 100rem;
					border: none;
					outline: none;
					background-color:#f2f2f2;
					border-radius: 8 / 100rem;
				}
			}
			p:nth-child(4){
				span{
					display: inline-block;
					width: 236 / 100rem;
					height: 76 / 100rem;
					border: 2px solid #ff5555;
					font-size: 30 / 100rem;
					text-align: center;
					line-height: 76 / 100rem;
					border-radius: 8 / 100rem;
					color: #ff5555;
				}
				span:nth-child(1){
					margin-right: 10 / 100rem;
				}
				a{
					display: block;
					float: right;
					margin-top: 20 / 100rem;
					font-size: 20 / 100rem;
					color: #ff5555;
				}
			}
		}
		.showError{
			width: 446 / 100rem;
			height: 76 / 100rem;
			border: 2px solid #ededed;
			background-color: rgba(255, 255, 255, 0.9);
			box-shadow: 0 0 10 / 100rem 10 / 100rem #ededed;
			border-radius: 8 / 100rem;
			text-align: center;
			line-height: 80 / 100rem;
			position: absolute;
			top:80 / 100rem;
			left:150 / 100rem;
			span{
				color: #ff5555;
				font-size: 36 / 100rem;
				font-weight: 600;
			}
		}

	}
</style>